<template>
  <div class="资讯">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>资讯管理</el-breadcrumb-item>
    </el-breadcrumb>
    <main>
      <div class="top">
        <li>
          <span>搜索：</span>
          <el-input
            placeholder="请输入资讯名称"
            icon="search"
            v-model="val"
            class="search-input"
          >
          </el-input>
        </li>
        <li>
          <!-- <span>状态：</span>
          <select name="" id="">
            <option value=""></option>
            <option value="">开启</option>
            <option value="">关闭</option>
          </select> -->
        </li>
        <li>
          <el-button type="primary" @click="addEquipment">新增</el-button>
        </li>
      </div>
      <!-- 表格 -->
      <el-table :data="tables" border stripe style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="文章标题" width="120">
          <template slot-scope="scope">
            <span
              style="margin-left: 10px"
              v-html="showDate(scope.row.title)"
              >{{ scope.row.title }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.name)">{{
              scope.row.name
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建日期" width="200">
          <template slot-scope="scope">
            <span style="margin-left: 10px" v-html="showDate(scope.row.time)">{{
              scope.row.time
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.state"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="id">
          <template slot-scope="scope" width="120">
            <el-button size="mini" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--新增、编辑弹窗 -->
      <el-dialog
        :title="titleMap[dialogStatus]"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item label="文章标题" :label-width="formLabelWidth">
            <el-input v-model="form.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建人" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="创建日期" :label-width="formLabelWidth">
            <el-input v-model="form.time" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <div class="block">
        <el-pagination
          background
          :current-page="pageIndex"
          :page-size="pageSize"
          @current-change="PageChange"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      val: "", /// 搜索关键字
      show: false,
      form: {
        title: "",
        name: "",
        time: "",
        id: 0,
      },
      pageIndex: 1,
      pageSize: 8,
      ind: 0,
      bool: false,
      total: 0, /// 总条数
      //根据点击的新增或编辑按钮显示不同的标题
      titleMap: {
        addEquipment: "新增",
        editEquipment: "编辑",
      },
      ///新增、编辑标题
      dialogStatus: "",
      dialogFormVisible: false,
      formLabelWidth: "120px",
      // 1是新增，2是编辑
      num: 0,
    };
  },
  created() {
    this.$api.getNews().then((res) => {
      this.tableData = res.data.data.data;
      this.PageChange() /// 首次加载
      this.total=res.data.data.total
    })
  },
  computed: {
    // 实时监听表格
    tables: function () {
      const val = this.val;
      if (val) {
        return this.tableData.filter((dataNews) => {
          return Object.keys(dataNews).some((key) => {
            return String(dataNews[key]).toLowerCase().indexOf(val) > -1;
          });
        });
      }
      return this.tableData;
    },
  },
  methods: {
    /// 新增
    addEquipment() {
      this.form.title = "";
      this.form.name = "";
      this.form.time = "";
      this.num = 1; ///当num为1新增
      this.dialogFormVisible = true;
      this.dialogStatus = "addEquipment";
    },
    /// 确定编辑数据
    submit() {
      if (this.num === 1) {
        this.dialogFormVisible = false;
        this.$api.addNews(this.form).then((res) => {
          this.$message.success(res.data.message);
          this.$api.getNews().then((res) => {
            this.tableData = res.data.data.data;
            this.total=this.tableData.length
          });
          this.PageChange()
        });
      } else {
        /// 编辑
        this.dialogFormVisible = false;
        this.$api
          .editNews({
            id: this.form.id,
            title: this.form.title,
            name: this.form.name,
            time: this.form.time,
          })
          .then((res) => {
            console.log(res, "edit");
            this.$message.success(res.data.message);
            this.$api.getNews().then((res) => {
              this.tableData = res.data.data.data;
            });
            this.PageChange()
          });
      }
    },
    /// 编辑回显数据
    handleEdit(row) {
      // 当 num 为 2 编辑
      this.num = 2;
      this.dialogFormVisible = true;
      this.dialogStatus = "editEquipment";
      this.form.id = row.id;
      this.form.title = row.title;
      this.form.name = row.name;
      this.form.time = row.time;
    },
    // 筛选变色
    showDate(value) {
      value = value + "";
      if (value.indexOf(this.val) !== -1 && this.val !== "") {
        return value.replace(
          this.val,
          '<font color="#f00">' + this.val + "</font>"
        );
      } else {
        return value;
      }
    },
    /// 删除表格数据
    handleDelete(index, row) {
      console.log(index, row);
      this.$api.delNews(row.id).then((res) => {
        console.log(res, "res");
        this.$message.success(res.data.message);
        this.$api.getNews().then((res) => {
          this.tableData = res.data.data.data;
        });
        this.PageChange()
      });
    },
    /// 分页
    PageChange(e = 1, ind = this.ind) {
      this.pageIndex = e;
      this.bool = true;
      this.$api
        .getNews({
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
          keyword: this.keyword,
        })
        .then((res) => {
          if (this.ind !== ind) return;
          if (res.data.code === 1) {
            this.tableData = res.data.data.data;
          }
          this.bool = false;
        })
    },
  },
};
</script>

<style lang='scss' scoped>
.liveBroadcast {
  width: 100%;
  height: 100%;
  .el-breadcrumb {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
}
.top {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  li {
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 20px;
    span {
      width: 60px;
    }
    select {
      width: 100px;
      height: 35px;
      outline: none;
    }
  }
}
main {
  width: 100%;
  height: auto;
}
.el-pagination {
  margin: 15px 0;
}
</style>